<template>
	<view class="parent">
		<view class="top">
			<view class="status-bar"></view>
			<view class="title-bar" @click="back()">
				<view class="back">
					<image class='back' :src="getImageUrl('ic_arrow_left_white_title.png')" mode="widthFix"></image>
				</view>
				<view class="title">VIP会员</view>
			</view>
			<text class="tip1">VIP专属特权</text>
			<view class="tip2">
				<view class="line"></view>
				<view class="text">专享多项特权，彰显尊贵身份</view>
				<view class="line"></view>
			</view>
			<view class="avatar-nick-vip">
				<image class="avatar" :src="user.pic">
				</image>
				<view class="nick-vip">
					<view class="nick">{{user.nick}}</view>
					<view class="vip">{{vipTip}}</view>
				</view>
				<image :src="getImageUrl('ic_mine_vip.png')" style="width: 60rpx;" mode="widthFix"></image>
			</view>
		</view>

		<scroll-view class="content" scroll-y>
			<view class="content-label">开通VIP会员</view>
			<view class="vip-list">
				<view class="item-vip" :class="{active: selectIndex == index}" v-for="(item, index) in list"
					:key="index" @click="selectIndex = index">
					<view class="month" :class="{active: selectIndex == index}">{{monthText(item)}}</view>
					<view class="price">
						<view class="currency" :class="{active: selectIndex == index}">￥</view>
						<view class="text" :class="{active: selectIndex == index}">{{item.price}}</view>
						<view class="origin" :class="{active: selectIndex == index}">{{item.price+50}}</view>
					</view>
					<view class="preferential" :class="{active: selectIndex == index}">立省50元</view>
					<view class="vip-top">{{item.strKey}}</view>
				</view>
			</view>
			<view class="content-label">会员特权4项</view>
			<view class="list">
				<view class="item-tag" v-for="(item, index) in tags" :key="index">
					<image class="pic" :src="item.pic"></image>
					<view class="title">{{item.title}}</view>
					<view class="sub">{{item.sub}}</view>
				</view>
			</view>
		</scroll-view>

		<view class="bottom" @click="showDialogPay">立即开通</view>

		<uni-popup type="bottom" ref="pay">
			<view class="popup">
				<view class="title">
					选择支付方式
				</view>
				<view class="type" v-for="(item, index) in payTypes" :key="index" @click="onItemPay(index)">
					<image :src="item.icon"></image>
					<view class="tip">{{item.title}}</view>
					<zy-checkbox :checked="item.checked"></zy-checkbox>
				</view>
				<view>
					<zy-button text="确定支付" @click.native="requestPay"></zy-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import constant from '@/common/constant.js'
	export default {
		data() {
			return {
				tags: [
					{
						pic: this.getImageUrl('vip_icon3.png'),
						title: '看得更多',
						sub: '查看用户再无次数限制'
					},
					{
						pic: this.getImageUrl('vip_icon4.png'),
						title: '看得更爽',
						sub: '迅速提升人气'
					},
					{
						pic: this.getImageUrl('vip_icon5.png'),
						title: '看得更久',
						sub: '阅后即焚查看提至6s'
					},
					{
						pic: this.getImageUrl('vip_icon6.png'),
						title: '看得更省',
						sub: '免费畅聊解锁社交账号'
					},
				],
				list: [],
				user: {},
				first: true,
				vipTip: 'VIP会员未开通',
				selectIndex: 0,
				payTypes: [
					{
						payType: 2,
						icon: this.getImageUrl('pay_wechat.png'),
						title: '微信支付',
						checked: false
					},
				],
				alipayTypes: [
					// {
					// 	payType: 1,
					// 	icon: this.getImageUrl('pay_alipay.png'),
					// 	title: '支付宝支付',
					// 	checked: false
					// },
					{
						payType: 2,
						icon: this.getImageUrl('pay_wechat.png'),
						title: '微信支付',
						checked: false
					},
				],
				payVisiable: false,
				payType: '',
				disablePay: false,
			}
		},
		onLoad() {
			// let isaliPay = uni.getStorageSync('isaliPay');
			// if(1==isaliPay){
			// 	this.payTypes = this.alipayTypes
			// }
		},
		onShow() {
			this.requestVipList();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			monthText(item) {
				let text = '月会员'
				if (3 == item.num) {
					text = '季会员'
				} else if (6 == item.num) {
					text = '半年会员'
				} else if (12 == item.num) {
					text = '年会员'
				}
				return text;
			},
			showDialogPay() {
				this.$refs.pay.open()
			},
			onItemPay(index) {
				this.payTypes.forEach(item => {
					item.checked = false
				});
				this.payTypes[index].checked = true;
			},
			async requestVipList() {
				let res = await this.$common.post('/app/vip/list');
				if (0 == res.code) {
					if (this.first) {
						this.list = res.data.list;
						this.first = false;
					}
					this.user = res.data.user;
					if (1 == res.data.user.isVip) {
						this.vipTip = '已开通VIP,' + res.data.user.vipEndDate + '到期';
						uni.setStorageSync('vip', true)
					}else{
						uni.setStorageSync('vip', false)
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			async requestPay() {
				if(this.disablePay){
					return
				}
				console.log('this.disablePay', '111111');
				this.disablePay = true
				
				this.payVisiable = false;
				let payType = '';
				this.payTypes.forEach(item => {
					if (item.checked) {
						payType = item.payType;
					}
				});
				if (!payType) {
					this.$common.showToast('请选择支付类型')
					this.disablePay = false
					return
				}

				// #ifdef MP-WEIXIN
				  this.requestMpWeixinPay();					  
				// #endif
				// #ifdef APP-PLUS || H5
				  this.requestAppPay(payType);					  
				// #endif
			},
			async requestAppPay(payType){
				let url = '/api/aliPayVersion3/transactionsH5';
				if (2 == payType) {
					url = '/api/wechatVersion3/rechargeH5';
				}
				const params = {
					type: '2',
					projectId: this.list[this.selectIndex].id,
					appId: constant.appId
				}
				let res = await this.$common.post(url, params);
				if (0 == res.code) {
					this.$refs.pay.close()
					if(2==payType){
						if(res.data.scan){
							this.qrcode = res.data.payUrl;
							this.$refs.qrcode.open()
							return
						}else if(res.data.app){
							uni.requestPayment({
							    "provider": "wxpay", 
							    "orderInfo": {
							        "appid": res.data.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							        "noncestr": res.data.nonceStr, // 随机字符串
							        "package": res.data.package,        // 固定值
							        "partnerid": res.data.mchId,      // 微信支付商户号
							        "prepayid": res.data.prepayId, // 统一下单订单号 
							        "timestamp": res.data.timeStamp,        // 时间戳（单位：秒）
							        "sign": res.data.sign // 签名，这里用的 MD5/RSA 签名
							    },
							    success(res) {},
							    fail(e) {}
							})
							return
						}else{
							const webview = plus.webview.create('', 'custom-webview');
							webview.loadURL(res.data.payUrl, {
								'Referer': 'http://api.ptszyxx.com://',
							});
						}
					}else{
						getApp().globalData.webUrl = res.data.payUrl;
						uni.navigateTo({
							url: '/main/web/web'
						})
					}
					setTimeout(()=>{
						this.disablePay = false
					}, 5000)
				} else {
					this.disablePay = false
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async requestMpWeixinPay(){
				let params = {
					userId: uni.getStorageSync('userId'),
					openid: uni.getSorageSync('openId'),
					appId: 'wx035a601976c258cc',
					projectId: this.list[this.selectIndex].id
				}
				let res = await this.$common.post('/api/JsApiController/recharge', params)
				if(0 == res.code){
					wx.requestPayment({
						"timeStamp":res.data.data.timeStamp,
						"nonceStr":res.data.data.nonceStr,
						"package": res.data.data.package,
						"signType": res.data.data.signType,
						"paySign": res.data.data.paySign,
						"success": (res) => {
							console.log("小程序支付成功: " + JSON.stringify(res));	
							this.$common.showToast('会员开通成功')
						},
						"fail": function(res) {
							console.log("小程序支付失败: " + JSON.stringify(res));					
						},
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.parent {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #252331;

			.status-bar {
				height: var(--status-bar-height);
				width: 100%;
			}

			.title-bar {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: start;
				width: 100%;
				height: 80rpx;

				.back {
					width: 80rpx;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					image {
						width: 30rpx;
					}
				}

				.title {
					position: absolute;
					top: auto;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #fff;
				}
			}

			.tip1 {
				font-size: 50rpx;
				color: #fdcb98;
				font-weight: bold;
				font-style: italic;
			}

			.tip2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 15rpx;
				font-size: 26rpx;
				color: #f8f0e3;

				.line {
					width: 100rpx;
					height: 1rpx;
					background-color: #f8f0e3;
					border-radius: 2rpx;
					opacity: 0.5;
				}

				.text {
					margin: 0 10rpx;
				}
			}

			.avatar-nick-vip {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 90%;
				padding: 30rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				background-color: #3b3a4c;
				border-top: 0.5px solid #fad6a4;
				border-left: 0.5px solid #fad6a4;
				border-right: 0.5px solid #fad6a4;
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.nick-vip {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					margin: 0 20rpx;

					.nick {
						font-size: 26rpx;
						color: #f6dac2;
					}

					.vip {
						font-size: 22rpx;
						color: #adadb7;
						margin-top: 10rpx;
					}
				}
			}
		}

		.content {
			flex: 1;
			overflow-y: auto; //重要

			.content-label {
				font-size: 28rpx;
				color: #000000;
				font-weight: 500;
				margin-left: 30rpx;
				margin-top: 30rpx;
			}

			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 15rpx;

				.item-tag {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 25%;
					padding: 15rpx;
					box-sizing: border-box;

					.pic {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.title {
						font-size: 24rpx;
						color: #000000;
						margin-top: 15rpx;
					}

					.sub {
						font-size: 24rpx;
						color: #9999a5;
						margin-top: 15rpx;
						text-align: center;
					}
				}
			}

			.vip-list {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				padding: 0 30rpx;

				.item-vip {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 30%;
					box-sizing: border-box;
					padding: 30rpx;
					background-color: #fff;
					border-radius: 15rpx;
					margin: 15rpx;
					box-shadow: 5px 5px 5px #eaeaea;

					.month {
						font-size: 28rpx;
						color: #000000;
					}

					.month.active {
						color: #e4ac4f;
					}

					.price {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						margin-top: 30rpx;

						.currency {
							font-size: 28rpx;
							color: #000000;
						}

						.currency.active {
							color: #e4ac4f;
						}

						.text {
							font-size: 50rpx;
							color: #000000;
							font-weight: 500;
							margin: 0 10rpx;
						}

						.text.active {
							color: #e4ac4f;
						}

						.origin {
							font-size: 28rpx;
							color: #9999a1;
							text-decoration: line-through;
						}

						.origin.active {
							color: #e4ac4f;
						}
					}

					.preferential {
						margin-top: 30rpx;
						padding: 10rpx 15rpx;
						font-size: 24rpx;
						color: #9a999f;
					}

					.preferential.active {
						border-radius: 15rpx;
						color: #aa7318;
						background: linear-gradient(to right, #eebc77, #fde7ad);
					}

					.vip-top {
						position: absolute;
						top: -15rpx;
						left: -2rpx;
						background: linear-gradient(to right, #f0be79, #fee5a3);
						padding: 8rpx 15rpx;
						font-size: 20rpx;
						color: #886112;
						border-top-left-radius: 20rpx;
						border-top-right-radius: 5rpx;
						border-bottom-left-radius: 5rpx;
						border-bottom-right-radius: 20rpx;
					}
				}

				.item-vip.active {
					border: 1px solid #cfa865;
					background-color: #faf6ed;
				}
			}
		}

		.bottom {
			height: 100rpx;
			line-height: 100rpx;
			margin: 10rpx 30rpx;
			background-color: #272733;
			border-radius: 50rpx;
			color: #f5deac;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		width: 100wh;
		height: 450rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}

		.type {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tip {
				font-size: 28rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

		}
	}
</style>